<template>
	<view>
		<ul class="flex">
			<li :class="tabbar=='0'?'orange':'ji'" @click='click("/pages/Home/Home")'>
				<view class="gu">
					<img src="../static/image/tabBar/首页-未选中.png" alt="">
					<img class='xian' src="../static/image/tabBar/首页-选中.png" alt="">
				</view>
				<span class='kuai'>首页</span>
			</li>
			<li :class="tabbar=='1'?'orange ring':'ring'" @click='click("/pages/square/square")'>
				<view class="gu">
					<img src="../static/image/tabBar/广场-未选中.png" alt="">
					<img class='xian' src="../static/image/tabBar/广场-选中.png" alt="">
				</view>

				<span class='kuai quan'>广场</span>
			</li>
			<li class='cen' @click='click("/pages/issue/issue")'>
				<view
					style="position: absolute;top:-35px;left: -14px;padding: 10px;border-radius: 50%;width: 120rpx;height:120rpx;box-sizing: border-box;">
					<img style='position: absolute;width: 100rpx;height: 100rpx;' src="../static/image/tabBar/椭圆 8.png"
						alt="">
					<img style='position: absolute;top:20px;height: 60rpx;width: 10rpx;left: 55%;border-radius: 3px;'
						src="../static/image/tabBar/棍.png" alt="">
					<img style='position: absolute;top:32px;height: 10rpx;width: 60rpx;left: 34%;border-radius: 3px;'
						src="../static/image/tabBar/竖棍.png" alt="">
				</view>


				<span style='position: absolute;bottom: 0px;text-align: center;width: 100%;left: -5px;'
					class='kuai'>发布</span>
			</li>
			<li :class="tabbar=='2'?'orange lan':'lan'" @click='click("/pages/newss/newss")'>
				<view class="gu">
					<img src="../static/image/tabBar/消息-未选中.png" alt="">
					<img class='xian' src="../static/image/tabBar/消息-选中.png" alt="">
				</view>

				<span class='kuai'>消息</span>
			</li>
			<li :class="tabbar=='3'?'orange':'my-bott'" @click='click("/pages/person/person")'>
				<view class="gu">
					<img src="../static/image/tabBar/我的-未选中.png" alt="">
					<img class='xian' src="../static/image/tabBar/我的-选中.png" alt="">
				</view>

				<span class='kuai'>我的</span>
			</li>
		</ul>
	</view>
</template>

<script>
	export default {
		props: {
			tabbar: Number
		},
		data() {
			return {

			}
		},
		methods: {
			click(url) {
				uni.switchTab({
					url: `${url}`
				})

			},


		}
	}
</script>

<style scoped lang="scss">
	.bai {

		background-repeat: no-repeat;
		width: 150upx;
		height: 150upx;
		background-size: 100%;
	}

	.bai {
		position: absolute;
		bottom: 44upx;
		left: 324upx;
	}

	.bai1 {
		transform: translate(-234upx, -180upx);
	}

	.bai2 {
		transform: translate(0upx, -280upx);
	}

	.bai3 {
		transform: translate(234upx, -180upx);
	}

	.bai img {
		padding: 50upx 40upx 50upx;
		width: 68upx;
		height: 56upx;
	}

	.hui .index {
		width: 120upx;
		height: 120upx;
		position: absolute;
		bottom: 44upx;
		left: 324upx;
	}

	.flex {
		display: flex;
		position: fixed;
		bottom: 0;
		background-color: white;
		z-index: 9999;
	}

	ul {
		list-style-type: none;
		padding: 0;
		width: 100%;
		box-sizing: border-box;
		-webkit-justify-content: space-around;
		border-top: 2upx solid rgb(246, 246, 246);
		padding: 10upx 12upx;

	}

	li span {
		font-size: 13px
	}

	ul li img {
		width: 50upx;
		height: 50upx;
	}

	.orange img {
		width: 50upx;
		height: 50upx;
	}

	.quan {
		padding-left: 4upx;
	}


	.ring .img {
		height: 60upx;

	}

	.kuai {
		display: block;
		text-align: center;
		color: #999
	}

	.cen {
		width: 15%;
		position: relative;
		margin-left: 2px;
	}





	.orange img {
		display: none;
	}

	.orange .xian {
		display: block;
	}

	.orange span {
		color: rgb(40, 210, 209)
	}

	.xian {
		display: none;
	}

	.gu {
		width: 28px;
		height: 28px;
	}
</style>